<template>
  <div class="container">
    <section id="content">
      <form>
        <h1>账号登录</h1>
        <div>
          <i class="close">X</i>
          <input
            type="text"
            placeholder="手机号"
            id="username"
            v-model.trim="username"
          />
        </div>
        <div>
          <i class="close">X</i>
          <input
            type="password"
            placeholder="密码"
            id="password"
            v-model.trim="password"
          />
        </div>
        <div>
          <input
            type="submit"
            value="登录"
            class="btn btn-primary"
            id="js-btn-login"
            @click.prevent="loginFn"
          />
        </div>
      </form>
    </section>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://124.223.14.236:3001/api";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    async loginFn() {
      if (this.username.trim().length === 0 || this.password === 0)
        return alert("不能为空");
      const { data } = await axios.post("/user/login", {
        username: this.username,
        password: this.password,
      });
      alert(data.msg);
      localStorage.setItem("token", data.data.token);
    },
  },
};
</script>

<style scoped>
@import url("@/assets/css/style.css");
@import url("@/assets/css/body.css");
</style>
